<template>
  <!-- 左侧bpmn元素选择器 -->
  <div class="node-panel">
    <div
      class="node-item"
      v-for="item in nodeList"
      :key="item.text"
      @mousedown="nodeDragNode(item)"
    >
      <div class="node-item-icon" :class="item.class">
        <div
          v-if="item.type === 'user' || item.type === 'time'"
          class="shape"
        ></div>
      </div>
      <span class="node-label">{{ item.text }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref } from "vue";
export default defineComponent({
  name: "NodePanel",
  props: {
    lf: Object,
    nodeList: Array
  },
  setup(props) {
    let node = ref({
      type: "rect",
      property: {
        a: "efrwe",
        b: "wewe"
      }
    });
    let properties = ref({
      a: "efrwe",
      b: "wewe"
    });

    const nodeDragNode = item => {
      props.lf.dnd.startDrag({
        type: item.type,
        properties: unref(properties)
      });
    };

    return {
      node,
      properties,
      nodeDragNode
    };
  }
});
</script>

<style scoped>
.node-panel {
  position: absolute;
  top: 100px;
  left: 50px;
  width: 70px;
  padding: 20px 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.node-item {
  margin-bottom: 20px;
}
.node-item-icon {
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-size: cover;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}
.node-start {
  background: url("./background/start.png") no-repeat;
  background-size: cover;
}
.node-rect {
  border: 1px solid black;
}
.node-user {
  background: url("./background/user.png") no-repeat;
  background-size: cover;
}
.node-time {
  background: url("./background/time.png") no-repeat;
  background-size: cover;
}
.node-push {
  background: url("./background/push.png") no-repeat;
  background-size: cover;
}
.node-download {
  background: url("./background/download.png") no-repeat;
  background-size: cover;
}
.node-click {
  background: url("./background/click.png") no-repeat;
  background-size: cover;
}
.node-end {
  background: url("./background/end.png") no-repeat;
  background-size: cover;
}
.bpmn-start {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-end {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-user {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-exclusiveGateway {
  background: url()
    center center no-repeat;
  cursor: grab;
}
</style>
